import React, { Component } from 'react';

import ClassifyStyleComp from './ClassifyStyleComp.js'

import { Tabs, WhiteSpace } from 'antd-mobile';

import { bindActionCreators } from 'redux'

import { actionCreators } from './store'

import { connect } from 'react-redux'

import { Link } from 'react-router-dom'

const FloorItem = props => {
    return (
               <li
                style = {{
                    width:'33%',
                    marginBottom:'.15rem',
                    marginTop:'.15rem'
                }}  
               >
                   <Link
                     to={{
                        pathname: '/list',
                        search: `${props.id}`,
                      }}
                    style = {{
                        display:'flex',
                        flexDirection:'column',
                        justifyContent:'center',
                        alignItems:'center'
                    }}
                   >
                   <img 
                    src = {'https://s2.juancdn.com'+ props.icon + '?iopcmd=convert&dst=webp' }
                    style = {{
                        width:'60%',
                        marginBottom:'.2rem'
                        
                    }}
                   />
                   <span> 
                   { props.name }
                   </span>
                   </Link>
               </li>           
    )
}


class Classify extends Component {
    constructor(props) {
        super(props);      
    }
    
    renderContent = tab => {
        return (
            <div 
            style={{ 
                display: 'flex', 
                flexDirection: 'column', 
                alignItems: 'center', 
                justifyContent: 'center',  
                backgroundColor: '#fff',
                padding:'.12rem'
             }}>
                 <div>
                     <ul
                     style = {{
                        paddingTop:".2rem",
                        display:'flex',
                        flexWrap:'wrap',
                        justifyContent:'space-around'
                    }}
                     >
                     {
                    tab.secondCateList.map (item => <FloorItem key = { item.id } { ...item }/>)
                    }
                     </ul>
                 </div>
                
            </div>
        )
    }



    render() {
        return (
            <ClassifyStyleComp>
                 <div style = {{ width:'100%',height:'100%'  }}>
                    <WhiteSpace />
                   { this.props.list && <Tabs 
                    tabDirection = "vertical"
                    tabBarPosition = "left"
                    tabs={this.props.list} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={12} />}>
                    {this.renderContent}
                    </Tabs>}
                    <WhiteSpace />
                </div>
            </ClassifyStyleComp>
        )
    }

    componentDidMount() {
        this.props.get_classify()
    }
}

export default connect(
    state=>state.classify,
    dispatch=>bindActionCreators( actionCreators , dispatch)
    )(Classify)